<!--  在选择职业之后的新的已知主页 -->
<template>
	<view class="newYiZhiIndexPage">
		<view class="interest-content" @query="getInfo" >
			<view style="margin-top: 20rpx;">
				<u-loading-icon v-if="loading"  status="loading" :size="48" text="正在加载..." textSize="32" />
			</view>
			<u-empty v-show="!loading&&list.length===0" mode="data" width="400rpx" marginTop="20rpx" icon="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/empty.png" text="没有数据哦~"> </u-empty>
			<view class="" v-show="!loading&&list.length>0">
				<view class="itt-content-boxs" v-for="(series,index) in list" :key="index">
					<view class="head">
						<h3 class="title">
							2{{ series.name }}
						</h3>
						<u-line-progress class="itt-line-progress" :activeColor="series.pace<60?'#FF9F5F':'##194FC9'" :percentage="series.pace" :height="20">
							<text class="u-percentage-slot">.</text>
						</u-line-progress>
						<view :class="series.pace<60?'u-percentage-numer':'u-percentage-numer u-percentage-numer-color'"> {{series.pace&&series.pace.toFixed(2)}}% </view>
					</view>
					<view class="content">
						<courseSeriesCardV2 v-for="(item,idn) in series.courseListVos" :key="idn" :item="item" @goDetail="toCourseInfo(item)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { memberLabel, getYzHome } from '../../apis/apis.js'
	import courseSeriesCardV2 from '../wx_subpack/courseSeriesCardV2.vue'
	export default {
		components: {
			courseSeriesCardV2,
		},
		data(){
			return{
				loading: false,
				list: [],
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(){
				// 参数名：type   数据类型（1：行业岗位标签，2：兴趣分类标签）
				getYzHome({type:1}).then(res=>{
					this.list = res.data || res.rows || []
					this.loading = false
					console.log(this.list);
				})
			},
			// 去系列详情
			toCourseInfo(item){
				uni.navigateTo({
					url: `/pages/index/courseList/courseList?seriesId=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.newYiZhiIndexPage{
	
	.interest-content{
		width: 100%;
		min-height: calc(100vh - 590rpx);
		background-color: #f5f5f5;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
	}
	.itt-content-boxs{
		margin-bottom: 60rpx;
		.head{
			.title{
				width: 188rpx;
				display: inline-block;
				margin-right: 0rpx;
				white-space: nowrap;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				transform: translateY(10rpx);
			}
			.itt-line-progress{
				width: 400rpx;
				display: inline-block;
				margin-right: 0rpx;
			}
			.u-percentage-numer{
				flex: 1;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FF9F5F;
				line-height: 46rpx;
				text-align: right;
				display: inline-block;
				width: 80rpx;
			}
			.u-percentage-slot{
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				background-color: #FFFFFF;
				margin-right: 10rpx;
				border-radius: 50%;
			}
			.u-percentage-numer-color{
				color: #194FC9;
			}
		}
	}
}

</style>
